<template>
  <div class="fit q-pa-md">
    <template v-if="videos!.length > 0">
      <div class="time-label q-my-sm">Recent Uploads</div>
      <div class="wrap grid-video-container">
        <video-card
          class="col-3"
          v-for="video in videos"
          :key="video.id"
          :video="video"
        />
      </div>
    </template>

    <template v-if="featuredVideo.length > 0">
      <div class="time-label q-my-sm">Featured</div>
      <div class="wrap grid-video-container">
        <video-card
          class="col-3"
          v-for="video in featuredVideo"
          :key="video.id"
          :video="video"
        />
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import Video from 'src/models/Video';
import VideoCard from 'components/video/SmallVideoCard.vue';
import { onBeforeMount, computed } from 'vue';
import { useUserStore } from 'src/stores/user-store';
import { useVideoStore } from 'src/stores/video-store';
const videoStore = useVideoStore();
const userStore = useUserStore();
const videos = computed(() => userStore.myVideos);
const featuredVideo = computed<Video[]>(() => videoStore.featuredVideos);
onBeforeMount(async () => {
  await userStore.getMyVideos();
});
</script>
<style lang="scss" scoped>
.time-label {
  font-size: 14px;
  color: #acacac;
}
</style>
